﻿<?php
include("./config.php");
include("./utils.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>键盘显示模式</title>
  <?php include 'scripts-inc.php' ?>
<script>
function map_class(key) {
  var m={
    "num+":"num_add",
    "num-":"num_minus",
    "num*":"num_star",
    "num/":"num_divide",
    "num.":"num_dot",
    "spacebar":"space",

    "pgup":"pagedown",
    "pgdn":"pageup",
    "printscreen":"prt",
    "prtscn":"prt",

    "-":"minus",
    "_":"minus",
    ":":"maohao",
    ";":"maohao",
    "\"":"shuangshuanyinhao",
    "<":"xiaoyuhao",
    ">":"dayuhao",
    ",":"xiaoyuhao",
    ".":"dayuhao",
    "+":"plus",
    "=":"plus",
    "→":"l_right",
    "←":"l_left",
    "↓":"l_down",
    "↑":"l_up",
    "right":"l_right",
    "left":"l_left",
    "down":"l_down",
    "escape":"esc",
    "\"":"shuanyinhao",
    "\'":"shuanyinhao",
    "{":"zuohuakuohao",
    "[":"zuohuakuohao",
    "}":"youhuakuohao",
    "]":"youhuakuohao",
    "|":"huo",
    "(":"a_9",
    ")":"a_0",
    "\\":"huo",
    "up":"l_up"
  };
  if (!m[key]) {
    return key;
  }
  return m[key];
}
// 上面的显示
function show_template(){/*
<div style="text-align:right;margin:6px auto 12px;">
  <span class="lang-down btn btn-default" style="display:inline"
    onclick="do_down({appid}, {shortcutid})">没用过({down})</span>
  &nbsp;
  <span class="lang-up btn btn-success" style="display:inline"
    onclick="do_up({appid}, {shortcutid})">我用过({up})</span>

  <a class="lang-edit edit-item btn btn-link"
    href="edit-item.php?id={shortcutid}&appid={appid}">编辑</a>
</div>

<div class="bs-callout bs-callout-warning col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<h4>{shortcut}</h4>
	<h4>{name}</h4>
	<p class="text-warning">{context}</p>
	<p class="text-muted">{des}</p>
</div>
*/}

function sns_template(){/*
<div class="">
  <div>{content}</div>
  <div class="text-muted">{update_time}</div>
</div>
*/}

var get_sns_data = function(appid, shortcutid, lang, op){
  var u = 'query.php?op='+op+'&id='+shortcutid+'&appid='+appid;
  if(lang) u = u + '&lang='+lang;
  $.ajax({url:u,
    dataType:"json",
    async:true,
    success : function(msg, textStatus) {
      var L = msg;
      var R = "";
      if(L){
        for(var i in L){
          var data = L[i];
          var s = hereDoc(sns_template);
          s = nano(s, data);
          R += s;
        }
      }
      $("#sns-result").html(R);
    }
  },"text");
}


function hilight_item(data)
{
  data.appid = gAppID;
  var keys = [];
  if (!data.shortcut){
    return;
  }
  var tmp = data.shortcut.split(' ');
  for(var i in tmp) {
    var x = tmp[i].split('+');
    for (var j in x) {
      var k = $.trim(x[j]).toLowerCase();
      k = map_class(k);
      keys.push(k);
      if ( k == ""){
        keys.push('+');
        break;
      }
    }
    
  }

  $(".anjian").removeClass("hilight").stop(true, true).show();
  for(var i in keys){
    var x = keys[i];
    if (x.match(/^[0-9]$/)) x = 'a_' + x;
    try{
      // 闪一下，然后恢复原样，然后延迟显示
      $("."+x).addClass("hilight").fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).delay(i*1000).fadeOut(400).addClass("hilight").fadeIn(800);
    }catch(e){
    }
  }
  var template = hereDoc(show_template);
  var s = nano(template, data);
  $("#result").html(s);
  gID = data.shortcutid;



}


var get_data = function(appid, shortcutid, lang, op){
  var u = 'query.php?op='+op+'&id='+shortcutid+'&appid='+appid;
  if(lang) u = u + '&lang='+lang;
  $.ajax({url:u,
    dataType:"json",
    async:true,
    success : function(msg, textStatus) {
      var data = msg[0];
      if(data){
        hilight_item(data);
        //修改title值
        $(document).attr("title", gLangData['lang-show']+'[' + data['shortcut']+data['name']+']');

        $("#return-list").attr("href","./show-app.php?appid="+gAppID);
        gData = data;
      } else {
        if (op=='prev') {
          show_msg("#content", "已经是第一条");
        }
        
        if (op=='next') {
          show_msg("#content", "已经是最后一条");
        }

      }
    }
  },"text");
}
var gAppID = <?php echo $_GET["appid"]; ?>;
var gID = <?php echo $_GET["id"]; ?>;
var gLang = "<?php echo getFromMap($_GET, 'lang', 'cn'); ?>";

$(function(){
  get_data(gAppID, gID, gLang, 'one-show-shortcut');

  $("#next").click(function(){
    get_data(gAppID, gID, gLang, 'next-show-shortcut');
  });
  $("#prev").click(function(){
    get_data(gAppID, gID, gLang, 'prev-show-shortcut');
  });


  $("#show-sns").click(function(){
    $("#sns-panel").toggleClass("hide");
    if ($("#sns-panel").is(":visible")){
      get_sns_data(gAppID, gID, gLang, 'get-sns-by-shortcut');
    }
  });

  $("#hide-sns").click(function(){
    $("#show-sns").trigger("click");
  });

  $("#send-sns").click(function(){
    var sns_content = $("#sns-content").val();
    if(sns_content.length < 3){
      show_msg("#sns-msg", "内容太少了");
      return;
    }
    if(sns_content.length > 140){
      show_msg("#sns-msg", "内容太多了");
      return;
    }

    var data = {
      op:'add-sns',
      id:gID,
      appid:gAppID,
      userid:5012111,
      content:sns_content,
      parent:0,
      status:0
    };

    $("#content").text("提交中...");
    $.post("update-data.php", data, function(msg){
      $("#sns-msg").html(gLangData['lang-send-succeed']);
      var s = hereTemplate(sns_template, data);
      $(s).appendTo($("#sns-result"));
      $("#sns-content").val("");
      show_msg("#content", "已评论");
    });

    return;
  });





});//end of $(function(){
</script>

<style type="text/css">

h2{font-size:24px; position:relative; top:15px; left:100px;}
body{ background:#f5f6f7; font-size:12px;}

.bs-callout-info {
    border-left-color: #1b809e;
}
.bs-callout {
    padding: 12px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #1b809e;
}

#jianpan{ width:1100px; height:360px; border:1px solid #999; margin:50px auto; background:#fff; border-radius: 20px; border:none; margin-bottom:20px;
box-shadow: rgba(0,0,0,0.3) 0 1px 5px; position:relative;}
.anjian{ width:40px; height:40px;border:1px solid lightgrey; box-shadow: rgba(0,0,0,0.3) 0 1px 5px; position:absolute;border-radius:4px;}
.lan_1{top:47px; height:28px;}
.esc{left:20px;}
.f1{left:116px;}
.f2{left:164px;}
.f3{left:212px;}
.f4{left:260px;}
.f5{left:328px;}
.f6{left:384px;}
.f7{left:432px;}
.f8{left:480px;}
.f9{left:548px;}
.f10{left:596px;}
.f11{left:644px;}
.f12{left:692px;}
.lan_2{top:85px}
.a_a{left:20px;}
.a_1{left:68px;}
.a_2{left:116px;}
.a_3{left:164px;}
.a_4{left:212px;}
.a_5{left:260px;}
.a_6{left:308px;}
.a_7{left:356px;}
.a_8{left:404px;}
.a_9{left:452px;}
.a_0{left:500px;}
.minus{left:548px;}
.plus{left:596px;}
.backspace{left:644px; width:88px;}
.prt,.insert, .delete, .l_left{left:747px;}
.scroll, .home, .end, .l_up, .l_down{left:796px;}
.pause, .pageup, .pagedown, .l_right{left:844px;}
.lan_3{ top:130px;}
.tab{left:20px; width:70px;}
.q{left:98px;}
.w{left:146px;}
.e{left:194px;}
.r{left:242px;}
.t{left:290px;}
.y{left:338px;}
.u{left:386px;}
.i{left:434px;}
.o{left:482px;}
.p{left:530px;}
.zuohuakuohao{left:578px;}
.youhuakuohao{left:626px;}
.huo{left:674px; width:58px;}
.lan_4{ top:175px;}
.caps{left:20px; width:80px;}
.a{left:108px;}
.s{left:156px;}
.d{left:204px;}
.f{left:252px;}
.g{left:300px;}
.h{left:348px;}
.j{left:396px;}
.k{left:444px;}
.l{left:492px;}
.maohao{left:540px;}
.shuanyinhao{left:588px;}
.enter{left:636px; width:96px;}
.lan_5{ top:220px;}
.shift{left:20px; width:107px;}
.z{left:135px;}
.x{left:183px;}
.c{left:231px;}
.v{left:279px;}
.b{left:327px;}
.n{left:375px;}
.m{left:423px;}
.xiaoyuhao{left:471px;}
.dayuhao{left:519px;}
.wenhao{left:569px;}
.m_4{left:615px; width:117px;}
.lan_6{ top:265px;}
.ctrl, .ctrl_1{ width:65px;}
.win, .win_1{ width:55px;}
.alt, .alt_1, .right_on{ width:50px;}
.ctrl{ left:20px;}
.win{ left:93px;}
.alt{ left:156px;}
.space{left:214px; width:270px;}
.alt_1{left:492px;}
.win_1{ left:550px;}
.right_on{ left:613px;}
.ctrl_1{ left:671px;}
.ctrl_1{ width:61px;}
.hilight{
  color: #fff;
  background-color: #551A8B;
  border-color: #551A8B;
}
span.first{ position:absolute; top:2px; left:5px; line-height:12px;}
span.second{ position:absolute; top:15px; text-align:center; width:40px;}
span.third{ position:absolute; top:10px; left:5px; width:40px; line-height:12px;}
span.fourth{ position:absolute; top:23px; left:5px; width:40px; line-height:12px;}
span.fifth{ position:absolute; top:40px; left:5px; width:40px; line-height:12px;}

.num_lock, .seven, .four, .one, .zone{ left:899px;}
.a_15, .eight, .five, .two{ left:947px;}
.a_16, .nine, .six, .three, .del{ left:995px;}
.a_17, .add, .s_enter{ left:1043px;}
.zone{ width:88px;}
.add, .s_enter{ height:85px;}
</style>
</head>
<body>
<div id="nav_data_src">
  <?php include 'navbars-inc.php' ?>
</div>

<div id="result" class="row center text-left" style="height:150px;">
</div>

<div id="jianpan">
  <div class="esc anjian lan_1"><span class="first">Esc</span></div>
  <div class="f1 anjian lan_1"><span class="first">F1</span></div>
  <div class="f2 anjian lan_1"><span class="first">F2</span></div>
  <div class="f3 anjian lan_1"><span class="first">F3</span></div>
  <div class="f4 anjian lan_1"><span class="first">F4</span></div>
  <div class="f5 anjian lan_1"><span class="first">F5</span></div>
  <div class="f6 anjian lan_1"><span class="first">F6</span></div>
  <div class="f7 anjian lan_1"><span class="first">F7</span></div>
  <div class="f8 anjian lan_1"><span class="first">F8</span></div>
  <div class="f9 anjian lan_1"><span class="first">F9</span></div>
  <div class="f10 anjian lan_1"><span class="first">F10</span></div>
  <div class="f11 anjian lan_1"><span class="first">F11</span></div>
  <div class="f12 anjian lan_1"><span class="first">F12</span></div>
  <div class="prt anjian lan_1"><span class="first">PrtSc SysRq</span></div>
  <div class="scroll anjian lan_1"><span class="first">Scroll Lock</span></div>
  <div class="pause anjian lan_1"><span class="first">Pause Break</span></div>
  
  <div class="a_a anjian lan_2"><span class="first">~</span><span class="fourth">`</span></div>
  <div class="a_1 anjian lan_2"><span class="first">!</span><span class="fourth">1</span></div>
  <div class="a_2 anjian lan_2"><span class="first">@</span><span class="fourth">2</span></div>
  <div class="a_3 anjian lan_2"><span class="first">#</span><span class="fourth">3</span></div>
  <div class="a_4 anjian lan_2"><span class="first">$</span><span class="fourth">4</span></div>
  <div class="a_5 anjian lan_2"><span class="first">%</span><span class="fourth">5</span></div>
  <div class="a_6 anjian lan_2"><span class="first">^</span><span class="fourth">6</span></div>
  <div class="a_7 anjian lan_2"><span class="first">& </span><span class="fourth">7</span></div>
  <div class="a_8 anjian lan_2"><span class="first">*</span><span class="fourth">8</span></div>
  <div class="a_9 anjian lan_2"><span class="first">(</span><span class="fourth">9</span></div>
  <div class="a_0 anjian lan_2"><span class="first">)</span><span class="fourth">0</span></div>
  <div class="minus anjian lan_2"><span class="first">-</span><span class="fourth">-</span></div>
  <div class="plus anjian lan_2"><span class="first">+</span><span class="fourth">=</span></div>
  <div class="backspace anjian lan_2"><span class="first">←Backspace</span></div>
  <div class="insert anjian lan_2"><span class="second">Insert</span></div>
  <div class="home anjian lan_2"><span class="second">Home</span></div>
  <div class="pageup anjian lan_2"><span class="third">Page Up</span></div>
  <div class="num_lock anjian lan_2"><span class="third">Num Lock</span></div>
  <div class="num_divide a_15 anjian lan_2"><span class="third">/</span></div>
  <div class="num_star a_16 anjian lan_2"><span class="third">*</span></div>
  <div class="num_minus a_17 anjian lan_2"><span class="third">-</span></div>
  
  <div class="tab anjian lan_3"><span class="first">Tab</span></div>
  <div class="q anjian lan_3"><span class="first">Q</span></div>
  <div class="w anjian lan_3"><span class="first">W</span></div>
  <div class="e anjian lan_3"><span class="first">E</span></div>
  <div class="r anjian lan_3"><span class="first">R</span></div>
  <div class="t anjian lan_3"><span class="first">T</span></div>
  <div class="y anjian lan_3"><span class="first">Y</span></div>
  <div class="u anjian lan_3"><span class="first">U</span></div>
  <div class="i anjian lan_3"><span class="first">I</span></div>
  <div class="o anjian lan_3"><span class="first">O</span></div>
  <div class="p anjian lan_3"><span class="first">P</span></div>
  <div class="zuohuakuohao anjian lan_3"><span class="first">{</span><span class="fourth">[</span></div>
  <div class="youhuakuohao anjian lan_3"><span class="first">}</span><span class="fourth">]</span></div>
  <div class="huo anjian lan_3"><span class="first">|</span><span class="fourth">\</span></div>
  <div class="delete anjian lan_3"><span class="second">Delete</span></div>
  <div class="end anjian lan_3"><span class="second">End</span></div>
  <div class="pagedown anjian lan_3"><span class="third">Page Down</span></div>
  <div class="seven anjian lan_3"><span class="third">7</span><span class="fourth">Home</span></div>
  <div class="eight anjian lan_3"><span class="third">8</span><span class="fourth">↑</span></div>
  <div class="nine anjian lan_3 PgUp"><span class="third">9</span><span class="fourth">PgUp</span></div>
  <div class="num_add add anjian lan_3"><span class="fifth">+</span></div>
  
  <div class="caps anjian lan_4"><span class="first">Caps Lock</span></div>
  <div class="a anjian lan_4"><span class="first">A</span></div>
  <div class="s anjian lan_4"><span class="first">S</span></div>
  <div class="d anjian lan_4"><span class="first">D</span></div>
  <div class="f anjian lan_4"><span class="first">F</span></div>
  <div class="g anjian lan_4"><span class="first">G</span></div>
  <div class="h anjian lan_4"><span class="first">H</span></div>
  <div class="j anjian lan_4"><span class="first">J</span></div>
  <div class="k anjian lan_4"><span class="first">K</span></div>
  <div class="l anjian lan_4"><span class="first">L</span></div>
  <div class="maohao anjian lan_4"><span class="first">:</span><span class="fourth">;</span></div>
  <div class="shuanyinhao anjian lan_4"><span class="first">"</span><span class="fourth">'</span></div>
  <div class="enter anjian lan_4"><span class="first">Enter</span></div>
  <div class="four anjian lan_4"><span class="third">4</span><span class="fourth">←</span></div>
  <div class="five anjian lan_4"><span class="third">5</span></div>
  <div class="six anjian lan_4"><span class="third">6</span><span class="fourth">→</span></div>
  
  <div class="shift anjian lan_5"><span class="first">Shift</span></div>
  <div class="z anjian lan_5"><span class="first">Z</span></div>
  <div class="x anjian lan_5"><span class="first">X</span></div>
  <div class="c anjian lan_5"><span class="first">C</span></div>
  <div class="v anjian lan_5"><span class="first">V</span></div>
  <div class="b anjian lan_5"><span class="first">B</span></div>
  <div class="n anjian lan_5"><span class="first">N</span></div>
  <div class="m anjian lan_5"><span class="first">M</span></div>
  <div class="xiaoyuhao anjian lan_5"><span class="first"><</span><span class="fourth">,</span></div>
  <div class="dayuhao anjian lan_5"><span class="first">></span><span class="fourth">.</span></div>
  <div class="wenhao anjian lan_5"><span class="first">?</span><span class="fourth">/</span></div>
  <div class="m_4 anjian lan_5"><span class="first">Shift</span></div>
  <div class="l_up anjian lan_5"><span class="second">↑</span></div>
  <div class="one anjian lan_5 End"><span class="third">1</span><span class="fourth">End</span></div>
  <div class="two anjian lan_5"><span class="third">2</span><span class="fourth">↓</span></div>
  <div class="three anjian lan_5 PgDn"><span class="third">3</span><span class="fourth">PgDn</span></div>
  <div class="s_enter anjian lan_5"><span class="fifth">Enter</span></div>
  
  <div class="ctrl anjian lan_6"><span class="first">Ctrl</span></div>
  <div class="win anjian lan_6"><span class="first">Win</span></div>
  <div class="alt anjian lan_6"><span class="first">Alt</span></div>
  <div class="space anjian lan_6"><span class="first"></span></div>
  <div class="alt_1 anjian lan_6"><span class="first">Alt</span></div>
  <div class="win_1 anjian lan_6"><span class="first">Win</span></div>
  <div class="right_on anjian lan_6"><span class="first"></span></div>
  <div class="ctrl_1 anjian lan_6"><span class="first">Ctrl</span></div>
  <div class="l_left anjian lan_6"><span class="second">←</span></div>
  <div class="l_down anjian lan_6"><span class="second">↓</span></div>
  <div class="l_right anjian lan_6"><span class="second">→</span></div>
  <div class="num_0 zone anjian lan_6"><span class="third">0</span><span class="fourth">Ins</span></div>
  <div class="num_dot del anjian lan_6"><span class="third">.</span><span class="fourth">Del</span></div>
</div>
<div>
  
</div>

<div class="clearfix"></div>

<div class="container-fluid">
<div class="row">
  <button id="prev" type="buttnon" class="lang-prev btn btn-lg btn-default text-center col-xs-2 col-sm-1 col-md-1 col-lg-1">&lt;&lt;</button>
  <a id="return-list" href="./index.php" class="lang-return-list btn btn-lg btn-warning col-xs-4 col-sm-1 col-md-1 col-lg-1">返回列表</a>
  <a href="javascript:window.opener=null;window.open('','_self');window.close();"
     class="lang-close-page btn btn-lg btn-danger col-xs-4 col-sm-2 col-md-2 col-lg-2 text-center" 
     id="goback-app" >关闭本页</a>
  <button id="show-sns" type="buttnon" 
    class="lang-next btn btn-lg btn-link col-xs-2 col-sm-1 col-md-1 col-lg-1">评论</button>
  <button id="next" type="buttnon" class="lang-next btn btn-lg btn-success col-xs-2 col-sm-2 col-md-2 col-lg-2">&gt;&gt;</button>
</div>

<div class="">
<div id="sns-panel" class="hide col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <div class="panel panel-default">
    <div class="panel-body">
      <div id="sns-result"></div>
      <div class="form-horizontal">
        <div class="form-group">
          <div class="col-xs-10 col-sm-11 col-md-11 col-lg-11"><textarea id="sns-content" rows="1" class="form-control"
             name="sns-content" placeholder=""></textarea></div>
          <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"><button id="send-sns" type="button" 
            class="lang-send btn btn-primary form-control text-center">发表</button></div>
        </div>
      </div>
    </div>
    <div class="panel-footer">
        <div class="row text-right"> 
          <a href="edit-item.php?id={shortcutid}&appid={appid}" target="_blank"
            class="lang-edit-shortcut text-center btn btn-primary">编辑快捷键</a>
          <button id="hide-sns" type="button" class="lang-cancel btn btn-link" >收起评论</button>
        </div>
    </div>

  </div>
</div>

<div class="form-group row">
    <div class="col-xs-8 col-sm-3 col-md-3 col-lg-3 text-left">
      <div id="content"></div>
    </div>
</div>


</div>

</div>

</body>
</html>
